<script setup lang='ts'>
import { ref, reactive, computed } from 'vue'
import MenuItem from "../MenuBar/index.vue"
import { useStore } from '@/store';
const state = useStore()
const menus = state.getters['menuState/getMenuList']
defineProps({
  isCollapse: {
    type: Boolean
  }
})
</script>
<template>
  <el-menu default-active="1" class="el-menu-vertical-demo" :collapse="isCollapse" active-text-color="#409eff"
    background-color="rgb(50,65,87)" text-color="#fff">
    <!-- 菜单 -->
    <div class="logo">
      <img src="@/assets/vue.svg" alt="">
      <span v-if='!isCollapse'>Default colors</span>
    </div>
    <MenuItem :menus="menus" :collapse="isCollapse">
    </MenuItem>
  </el-menu>
</template>
<style lang='less' scoped>
.el-menu {
  border: none;
}

.logo {
  display: flex;
  height: 70px;
  justify-content: center;
  align-items: center;
  font-size: 30px;

  span {
    padding: 30px;
    color: #fff;
    font-size: 20px;
  }
}
</style>